<template>
    <div class="monitor">
        <Main :showTitle="true">
            <template v-slot:left>
                <transition name="fade">
                    <div class="left-part-container monitor-left-part-1">
                        <img class="left-title" src="@/assets/monitor/left-title.png" alt="">
                        <BasePanel :baseInfo="baseInfo"></BasePanel>
                        <div class="date">
                            <DatePicker @getTime="getTime"/>
                        </div>
                        <div style="margin-left: 14px;margin-top: 15px">
                            <TimeLine title="温度" :line-data="todayData" type="air_temperature"/>
                        </div>
                        <div class="dot-line"></div>
                        <div style="margin-left: 14px;margin-top: 15px">
                            <TimeLine title="雨量" :line-data="todayData" type="rainfall_sensor"/>
                        </div>
                        <div class="dot-line"></div>
                        <div style="margin-left: 14px;margin-top: 15px">
                            <TimeLine title="土壤含水量" :line-data="todayData" type="rainfall_sensor"/>
                        </div>
                        <div class="action-btn">
                            <img class="open" v-show="isRealTime" src="@/assets/monitor/open.png" @click="()=>{handleOpen(false)}" alt="">
                            <img class="open" v-show="!isRealTime" src="@/assets/monitor/close.png" @click="()=>{handleOpen(true)}" alt="">
                        </div>
                    </div>
                </transition>
                <transition name="fade22">
                    <div class="left-part-container monitor-left-part-1-more" v-show="!isRealTime">
                        <div style="margin-left: 14px;margin-top: 15px">
                            <TimeLine title="风速" :line-data="todayData" type="wind_speed_sensor"/>
                        </div>
                        <div class="dot-line"></div>
                        <div style="margin-left: 14px;margin-top: 15px">
                            <TimeLine title="日照时候数" :line-data="todayData" type="illuminance_sensor"/>
                        </div>
                        <div class="dot-line"></div>
                        <div style="margin-left: 14px;margin-top: 15px">
                            <TimeLine title="大气湿度" :line-data="todayData" type="air_humidity"/>
                        </div>
                    </div>
                </transition>
            </template>
            <template v-slot:right>
                <div class="monitor-right-part-1">
                    <img class="right-title" src="@/assets/monitor/right-title.png" alt="">
                    <div class="video-area">
                        <div class="select">
                            <el-select class="d-select" popper-class="d-select-down" :popper-append-to-body="false"
                                       v-model="videoValue" placeholder="请选择">
                                <el-option
                                        v-for="item in options"
                                        :key="item.value"
                                        :label="item.text"
                                        :value="item.value">
                                </el-option>
                            </el-select>
                        </div>
                        <div class="video-play">
                            <div id="xg"></div>
                        </div>
                    </div>
                    <div class="wlw-area">
                        <img class="right-title" src="@/assets/home/wlw-title.png" alt="">
                        <BasePanel :baseInfo="wlwInfo"></BasePanel>
                        <div class="table-list">
                            <div class="select">
                                <el-input v-model="deviceFilter"/>
                                <div class="search-btn" @click="pageChange(1)">
                                    <img class="img-2x" src="@/assets/monitor/search-icon.png" alt="">
                                </div>
                            </div>
                            <div class="monitor-tips">
                                <img class="img-4x" src="@/assets/monitor/tip.png" alt="">
                            </div>
                            <DevicePanel :deviceList="currentDeviceList"/>
                            <div class="page">
                                <el-pagination
                                        background
                                        :current-page="currentPage"
                                        layout="prev, pager, next"
                                        :page-size="4"
                                        @current-change="pageChange"
                                        :total=filterDeviceList.length>
                                </el-pagination>
                            </div>
                        </div>

                    </div>
                </div>

            </template>
        </Main>
    </div>
</template>

<script>
    import Main from "./Main";
    import BasePanel from "../component/BasePanel";
    import DatePicker from "../component/DatePicker";
    import TimeLine from "../component/TimeLine";
    import DevicePanel from "../component/DevicePanel";
    import 'xgplayer';
    import FlvJsPlayer from 'xgplayer-flv.js';
    import {getCurrentData, getHistoryData, getTodayData, getWeather} from "../api/home";

    export default {
        components: {Main, BasePanel, DatePicker, TimeLine, DevicePanel},
        name: "monitor",
        data() {
            return {
                weather:{},
                weatherNow:{},
                isRealTime: true,
                baseInfo: [
                    {
                        title: '温度',
                        data: '-'
                    },
                    {
                        title: '雨量',
                        data: '-'
                    },
                    {
                        title: '土壤含量',
                        data: '-'
                    },
                    {
                        title: '风速',
                        data: '-'
                    },
                    {
                        title: '日照时候数',
                        data: '-'
                    },
                    {
                        title: '大气湿度',
                        data: '-'
                    }
                ],
                wlwInfo: [
                    {
                        title: '在线数',
                        data: '9'
                    },
                    {
                        title: '离线数',
                        data: '1'
                    },
                    {
                        title: '故障数',
                        data: '1'
                    },
                    {
                        title: '在线率',
                        data: (9/11).toFixed(2)*100+'%'
                    },
                    {
                        title: '离线率',
                        data: (1/11).toFixed(2)*100+'%'
                    },
                    {
                        title: '故障率',
                        data: (1/11).toFixed(2)*100+'%'
                    }
                ],
                deviceList: [
                    {
                        name: '地块一温度传感器',
                        type: '土壤类',
                        status: 0
                    },
                    {
                        name: '地块一湿度传感器',
                        type: '土壤类',
                        status: 0
                    },
                    {
                        name: '地块二温度传感器',
                        type: '土壤类',
                        status: 0
                    },
                    {
                        name: '地块二湿度传感器',
                        type: '土壤类',
                        status: 0
                    },
                    {
                        name: '风力风向传感器',
                        type: '气象类',
                        status: 0
                    },
                    {
                        name: '空气质量传感器',
                        type: '气象类',
                        status: 0
                    },
                    {
                        name: '风速传感器',
                        type: '气象类',
                        status: 0
                    },
                    {
                        name: '日照时数传感器',
                        type: '气象类',
                        status: 0
                    },
                    {
                        name: '大气温度传感器',
                        type: '气象类',
                        status: 0
                    },
                    {
                        name: '大气湿度传感器',
                        type: '气象类',
                        status: 0
                    },
                    {
                        name: '降雨量传感器',
                        type: '气象类',
                        status: 0
                    },
                    {
                        name: '主水泵阀门开关',
                        type: '阀门类',
                        status: 0
                    },
                    {
                        name: '地块一阀门开关',
                        type: '阀门类',
                        status: 0
                    },
                    {
                        name: '地块二阀门开关',
                        type: '阀门类',
                        status: 0
                    },
                    {
                        name: '地块视频监控',
                        type: '视频类',
                        status: 0
                    }
                ],
                limit:4,
                offset:0,
                currentPage:1,
                totalCount:15,
                videoValue: 'http://dc.paramcloud.cn:10000/sms/34020000002020000001/flv/hls/34020000001110000202_34020000001320000001.flv',
                options: [
                    {
                        text: '地块一',
                        value: 'http://dc.paramcloud.cn:10000/sms/34020000002020000001/flv/hls/34020000001110000202_34020000001320000001.flv'
                    },
                    {
                        text: '地块二',
                        value: 'http://dc.paramcloud.cn:10000/sms/34020000002020000001/flv/hls/34020000001110000202_34020000001320000008.flv'
                    }
                ],
                player: null,
                CurrentData: null,
                todayData: [],
                currentDeviceList:[],
                deviceFilter:'',
                filterDeviceList:[]
            }
        },
        mounted() {
            this.getWeather()
            this.playVideo()
            this.filterDeviceList = this.deviceList
            this.currentDeviceList = this.deviceList.slice(0,this.limit)
        },
        watch: {
            videoValue(val) {
                this.checkVideo(val)
            },
            CurrentData(val) {
                const temp = [
                    {
                        title: '温度',
                        data: this.weatherNow.temperature + '℃'
                    },
                    {
                        title: '雨量',
                        data: val.rainfall_sensor / 10 + 'mm'
                    },
                    {
                        title: '土壤含水量',
                        data: val.soil_moisture / 10 + '%'
                    },
                    {
                        title: '风速',
                        data: this.weather.day_wind_power.split(" ")[1]
                    },
                    {
                        title: '日照时候数',
                        data: this.getHour(this.weather.sun_begin_end.split('|')[0],this.weather.sun_begin_end.split('|')[1]) + 'h'
                    },
                    {
                        title: '大气湿度',
                        data: this.weatherNow.sd
                    }
                ]
                this.baseInfo = temp
            },

        },
        methods: {
            handleOpen(b) {
                this.isRealTime = b
            },
            pageChange(val){
                this.currentPage = val
                let start = val===1?0:(val-1)*4
                let end = start + this.limit
                this.filterDeviceList = this.deviceList.filter(item=>item.name.match(this.deviceFilter))
                this.currentDeviceList =  this.filterDeviceList.slice(start,end)
            },
            playVideo() {
                this.player = new FlvJsPlayer({
                    id: 'xg',
                    url: this.videoValue,
                    isLive: true, //直播场景设置为true
                    hasVideo: true,
                    hasAudio: true,
                    volume: 0,
                    autoplay: true,
                    flvOptionalConfig: {
                        enableWorker: true,
                    }
                })
                this.player.once('canplay', () => {
                    this.player.play()
                })
            },
            checkVideo(url) {
                this.player.src = url
            },
            getCurrentData(LandIds) {
                getCurrentData(LandIds).then(res => {
                    this.CurrentData = res.data.data
                })
            },
            getTodayData(LandIds) {
                getTodayData(LandIds).then(res => {
                    this.todayData = res.data.data
                })
            },
            getWeather() {
                getWeather({
                    "area": "重庆",
                }).then(res => {
                    this.weather = res.data.showapi_res_body.f1
                    this.weatherNow = res.data.showapi_res_body.now
                    this.getCurrentData('a')
                    this.getTodayData('a')
                })
            },
            getTime(value) {
                const currentTime =this.dateFormat('YYYY-mm-dd HH:MM:SS',new Date())
                getHistoryData({
                    "landId": "a",
                    "startTime": value,
                    "endTime": currentTime
                }).then(res => {
                    this.todayData = res.data.data
                })
            },
            dateFormat(fmt, date) {
                let ret;
                const opt = {
                    "Y+": date.getFullYear().toString(),        // 年
                    "m+": (date.getMonth() + 1).toString(),     // 月
                    "d+": date.getDate().toString(),            // 日
                    "H+": date.getHours().toString(),           // 时
                    "M+": date.getMinutes().toString(),         // 分
                    "S+": date.getSeconds().toString()          // 秒
                    // 有其他格式化字符需求可以继续添加，必须转化成字符串
                };
                for (let k in opt) {
                    ret = new RegExp("(" + k + ")").exec(fmt);
                    if (ret) {
                        fmt = fmt.replace(ret[1], (ret[1].length == 1) ? (opt[k]) : (opt[k].padStart(ret[1].length, "0")))
                    }
                    ;
                }
                ;
                return fmt;
            },
            getHour(s1, s2) {
                var reDate = /\d{4}-\d{1,2}-\d{1,2} /;
                s1 = new Date((reDate.test(s1) ? s1 : '2018-1-1 ' + s1).replace(/-/g, '/'));
                s2 = new Date((reDate.test(s2) ? s2 : '2018-1-1 ' + s2).replace(/-/g, '/'));
                var ms = s2.getTime() - s1.getTime();
                if (ms < 0) return 0;
                return Math.floor(ms / 1000 / 60 / 60);  //小时
            }

        }
    }
</script>

<style lang="less">
    .monitor {
        .left-part {
            margin-top: 30px;
            height: 1008px;
        }

        .monitor-left-part-1 {
            position: absolute;
            width: 380px;
            height: 1008px;
            box-sizing: border-box;
            /*border: 1px solid rgba(77, 77, 77, 1);*/
        }

        .monitor-right-part-1 {
            position: absolute;
            width: 380px;
            box-sizing: border-box;
            /*border: 1px solid rgba(77, 77, 77, 1);*/
        }

        .date {
            margin-left: 14px;
        }

        .base-panel-item:last-child {
            border-left: 1px solid rgba(55, 55, 55, 1);
        }

        .dot-line {
            width: 335px;
            margin: 20px 0 20px 36px;
            border-top: 1px dashed #4D4D4D;
        }

        .action-btn {
            width: 356px;
            height: 40px;
            position: absolute;
            bottom: 15px;
            left: 13px;
            cursor: pointer;
            background-image: linear-gradient(180deg, rgba(255, 104, 41, 0.20) 94%, rgba(252, 171, 109, 0.00) 100%);

            .open {
                width: 356px;
                height: 40px;
            }
        }

        .left-title, .right-title {
            margin-left: -1px;
        }

        .video-area {
            width: 360px;
            padding: 0 10px;

            .select {
                width: 360px;
                height: 34px;
                background: rgba(7, 7, 7, 0.30);
                /*border: 1px solid rgba(77,77,77,1);*/
            }

            .video-play {
                margin-top: 10px;
                height: 200px;

                img {
                    width: 360px;
                    height: 199.63px;
                }
            }

            #xg {
                width: 100% !important;
                height: 100% !important;
            }
        }

        .wlw-area {
            margin-top: 10px;

            .monitor-tips {
                margin: 5px 0;
                width: 380px;
                display: flex;
                justify-content: center;;
                text-align: center;
            }
        }

        .table-list {
            width: 100%;
            padding: 0 10px 5px;

            .select {
                width: 360px;
                height: 34px;
                background: rgba(7, 7, 7, 0.30);
                border: 1px solid rgba(77, 77, 77, 1);
                display: flex;
                overflow: hidden;

                .el-input {
                    width: 324px;

                    .el-input__inner {
                        height: 34px;
                        line-height: 34px;
                        color: #F8733B;
                        background: #080C0D;
                        border-radius: 0;
                        border: none;
                    }
                }

                .search-btn {
                    width: 36px;
                    height: 34px;
                    background: #F8733B;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    cursor: pointer;
                }
            }

            .page {
                width: 100%;
                display: flex;
                justify-content: center;
                margin-top: -5px;

                li, button {
                    width: 24px;
                    min-width: 24px;
                    height: 24px;
                    line-height: 24px;
                    color: #fff;
                    background-color: rgba(7, 7, 7, 0.30);
                    border: 1px solid rgba(77, 77, 77, 1);
                    border-radius: 2px;

                    &:hover {
                        background-color: #F8733B !important;
                        color: #FFF !important;
                    }
                }

                .active {
                    background-color: #F8733B !important;
                    color: #FFF;
                }
            }
        }
    }

    .fade-enter-active,
    .fade-leave-active {
        transition: all 1s ease;
    }

    .fade-enter {
        opacity: 0;
        transform: translateX(0);
    }

    .fade-enter-to {
        opacity: 1;
        transform: translateX(400px);
    }

    .fade-leave-to {
        /*transform: translateY(100%);*/
        opacity: 1;
    }

    .d-select {
        width: 100%;
        height: 100%;

        .el-input__inner {
            height: 36px;
            line-height: 36px;
            color: #F8733B;
            background: #080C0D;
            border-radius: 0;
            border: 1px solid rgba(77, 77, 77, 1);

            &:focus {
                border-color: #F8733B;
            }
        }

        .is-focus .el-input__inner {
            border-color: #F8733B !important
        }

        .el-input__suffix {
            display: flex;
            margin-right: 15px;

            .el-input__suffix-inner {
                display: flex;
                justify-content: center;
                align-items: center;

                .el-select__caret {
                    width: 0;
                    height: 0;
                    z-index: 1;
                    border-bottom: 8px solid #F8733B;
                    border-right: 4px solid transparent;
                    border-left: 4px solid transparent;

                    &::before {
                        display: none;
                    }
                }
            }
        }

    }

    .d-select-down {
        background: #080C0D;
        border: 1px solid rgba(77, 77, 77, 1);
        border-radius: 0px;
        top: 30px;
        padding: 0 10px;

        .el-select-dropdown {
            background-color: #080C0D;
            border: none;
        }

        .el-select-dropdown__item {
            background-color: #080C0D;
            font-size: 14px;
            height: 36px;
            line-height: 36px;
            color: #FFFFFF;
            border-bottom: 1px solid rgba(55, 55, 55, 1);
        }

        .el-select-dropdown__item.hover, .el-select-dropdown__item:hover {
            background: #333333;
            color: #F8733B;
        }

        .popper__arrow {
            display: none;
        }

        .el-select-dropdown__list {
            padding: 0;
        }
    }
    .monitor-left-part-1-more{
        position: relative;
        left: 410px;
        background: rgba(7,7,7,0.74);
        top: 258px;
        position: absolute;
        width: 380px;
        box-sizing: border-box;
    }
</style>

